<script setup>
import httpInstance from "@/axios/index";
import {useUserStore} from '@/stores/user.js'
import {onMounted, ref} from "vue";
import {EditPen, Plus} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";

const Router = useRouter()

const userStore = useUserStore()

//抽屉
const subType = ref("")
const dialog = ref(false)
const loading = ref(false)
const fromData = ref({
  parentId: -1,
  name: "",
  description: "",
  perms: "",
  router: "",
  component: "",
  type: 0,
  sortId: 0,
  isPublic: 0,
  status: 0
})

const handleClose = (done) => {
  if (loading.value) {
    return
  }
  dialog.value = false
  fromData.value = {
    parentId: -1,
    name: "",
    description: "",
    perms: "",
    router: "",
    component: "",
    type: 0,
    sortId: 1,
    isPublic: 0,
    status: 0
  }
}

//根据id获取数据
const getInfo = (id) => {
  httpInstance({
    url: "/menu/getById/" + id,
    method: "get"
  }).then(res => {
    fromData.value = res.data
    dialog.value = true
  })
}

//数据操作
const onClick = () => {
  if (subType.value === "Update") {
    updateInfo()
  } else {
    insertInfo()
  }
}
//修改信息
const updateInfo = () => {
  httpInstance({
    url: "/menu/update",
    method: "put",
    data: qs.stringify(fromData.value)
  }).then(res => {
    if (res.data.code === 200){
      ElMessage.success("修改成功")
      handleClose()
      getData()
    }
  })
}

//新增功能
const insertInfo = () => {
  httpInstance({
    url: "/menu/add",
    method: "post",
    data: qs.stringify(fromData.value)
  }).then(res => {
    if (res.data.code === 200){
      ElMessage.success("新增成功")
      handleClose()
      getData()
    }
  })
}
//删除功能
const deleteInfo = (id) => {
  //确定是否删除
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    httpInstance({
      url: "/menu/delete/" + id,
      method: "delete"
    }).then(res => {
      if (res.data.code === 200){
        ElMessage.success("删除成功")
        getData()
      }
    })
  }).catch(() => {

  })
}

const tableData = ref()
//分页信息
const page = ref({
  pageNo: 1,
  pageSize: 5,
  pageTotal: 0
})

//获取数据
const getData = () => {
  httpInstance({
    url: "/menu/getTreeList",
    method: "get",
    params: {
      pageNo: page.value.pageNo,
      pageSize: page.value.pageSize
    }
  }).then(res => {
    tableData.value = res.data
    page.value.pageTotal = res.data.total
    page.value.pageNo = res.data.pageNo
    page.value.pageSize = res.data.pageSize
  })
}

onMounted(getData)
</script>

<template>
  <el-row>
    <el-drawer
        v-model="dialog"
        title="数据操作"
        :before-close="handleClose"
        class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
            label-position="top"
            label-width="auto"
            :model="fromData"
            style="max-width: 600px"
        >
          <el-form-item prop="parentId">
            <el-select v-model="fromData.parentId" placeholder="请选择上级权限菜单" style="width: 100%;vertical-align: middle;display: table-cell;">
              <template #prefix>
                上级权限菜单
              </template>
              <el-option label="顶级权限菜单" :value="parseInt('-1')"></el-option>
              <template v-for="(item, index) in tableData">
                <el-option :label="item.name" :value="parseInt(item.id)"></el-option>
                <!--
                  这里做了遍历判断，如果第一级菜单有子权限菜单，把子权限菜单也遍历出来
                  然后在子权限菜单的名称前面加上-符号
                  这里只做了两级菜单遍历
                -->
                <template v-for="child in item.children">
                  <el-option :label="child.name" :value="parseInt(child.id)">
                    <span>{{ '&emsp;-&emsp;' + child.name }}</span>
                  </el-option>
                </template>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="fromData.name" placeholder="请输入权限菜单名称">
              <template #prepend>
                权限菜单名称
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="description">
            <el-input v-model="fromData.description" placeholder="请输入权限菜单描述">
              <template #prepend>
                权限菜单描述
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="perms">
            <el-input v-model="fromData.perms" placeholder="请输入权限标识">
              <template #prepend>
                权限菜单标识
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="router">
            <el-input v-model="fromData.router" placeholder="请输入权限菜单访问路径">
              <template #prepend>
                权限菜单访问路径
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="component">
            <el-input v-model="fromData.component" placeholder="请输入权限菜单组件路径">
              <template #prepend>
                权限菜单组件路径
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="type">
            <el-select v-model="fromData.type" placeholder="请选择权限菜单类型" style="width: 100%;vertical-align: middle;display: table-cell;">
              <template #prefix>
                权限菜单类型
              </template>
              <el-option label="目录" :value="parseInt('0')"></el-option>
              <el-option label="菜单" :value="parseInt('1')"></el-option>
             <el-option label="按钮" :value="parseInt('2')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sortId">
            <el-input v-model="fromData.sortId" placeholder="请输入权限菜单排序">
              <template #prepend>
                权限菜单排序
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="isPublic">
            <el-select v-model="fromData.isPublic" placeholder="请选择权限菜单是否公开" style="width: 100%;vertical-align: middle;display: table-cell;">
              <template #prefix>
                权限菜单是否公开
              </template>
              <el-option label="是" :value="parseInt('1')"></el-option>
              <el-option label="否" :value="parseInt('0')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="status">
            <el-select v-model="fromData.status" placeholder="请选择权限菜单状态" style="width: 100%;vertical-align: middle;display: table-cell;">
              <template #prefix>
                权限菜单状态
              </template>
              <el-option label="正常" :value="parseInt('1')"></el-option>
              <el-option label="禁用" :value="parseInt('0')"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="loading" @click="onClick">
            {{ loading ? '提交中...' : '提交' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
    <el-col :span="24">
      <el-card>
        <div slot="header" class="clearfix">
              <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <el-button color="#409EFF" style="color: white" @click="dialog = true;subType = 'Insert';">
                      <el-icon><Plus/></el-icon>
                      <span>新增</span>
                    </el-button>
                  </span>
        </div>
        <div class="text item">
          <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border style="width: 100%">
            <el-table-column prop="name" label="权限菜单名称" width="250px;"></el-table-column>
            <el-table-column prop="perms" label="权限菜单标识" width="150px;"></el-table-column>
            <el-table-column prop="router" label="权限菜单访问路径" width="200px;"></el-table-column>
            <el-table-column label="权限菜单类型" align="center" width="120px;">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.type == 0">目录</el-tag>
                <el-tag type="warning" v-if="scope.row.type == 1">菜单</el-tag>
                <el-tag type="success" v-if="scope.row.type == 2">按钮</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sortId" label="排序ID" width="100px;"></el-table-column>
            <el-table-column label="是否公共权限菜单" align="center" width="140px;">
              <template #default = "scope">
                <el-tag type="success" v-if="scope.row.isPublic == 1">是</el-tag>
                <el-tag type="danger" v-if="scope.row.isPublic != 1">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="权限菜单状态" align="center" width="120px;">
              <template #default = "scope">
                <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
                <el-tag type="danger" v-if="scope.row.status != 1">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px;">
              <template #default = "scope">
                <!-- TODO -->
                <el-button type="primary" size="small" @click="getInfo(scope.row.id);subType = 'Update'">修改</el-button>
                <el-button type="danger" size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="card-footer">
          <el-pagination
              v-model:current-page="page.pageNo"
              v-model:page-size="page.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              background
              layout="sizes, prev, pager, next"
              :total="page.pageTotal"
              @size-change=""
              @current-change=""
          />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


.card-footer {
  display: flex;
  justify-content: flex-end;
}

.text {
  display: flex;
  font-size: 14px;
  flex-direction: column;
}

.text p {
  margin-bottom: 15px;
}

.text p span {
  display: inline-block;
  width: 37%;
  font-weight: lighter;
}

.el-image__inner {
  width: 60px;
  height: 60px;
  border-radius: 50%
}

.info-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 25px 0;
}

.info-header p {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: lighter;
}

.info-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  margin: 25px 0;
}
</style>